<template>
  <div class="swiper">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
          <div id="swiper1" style="width:100%;height:8rem;" ></div>
      </swiper-slide>
      <swiper-slide>
        <div id="swiper2" style="width:100%;height:8rem;" ></div>
      </swiper-slide>
      <swiper-slide>
        <div id="swiper3" style="width:100%;height:8rem;" ></div>
      </swiper-slide>
<!--      <div class="swiper-pagination"  slot="pagination"></div>-->
    </swiper>
    <div class="list">
      <div class="info" v-for="(item,index) in arr" :key="index" :class="{active: index==num}" @click="changeSwiper(index)">{{item}}</div>
    </div>
  </div>
</template>

<script>
import api from '@/api/index'
export default {
data(){
  let that=this
  return{
    arr:['全国疫情新增趋势','累计确诊现有确诊','累计治愈累计死亡'],
    num:0,
    addArr:[],
    suspectArr:[],
    nameArr:[],
    confirmArr:[],
    nowArr:[],
    dateArr:[],
    healArr:[],
    deadArr:[],
    dateArr1:[],
    l1:['疑似', '确诊' ],
    l2:['现有确诊', '累计确诊'],
    l3:['累计治愈','累计死亡'],
    type:0,
    // swiper的配置项
    swiperOptions:{
      // pagination:{
      //   el:'.swiper-pagination'
      // },
     //  autoplay: {
     // delay: 3000,
     // stopOnLastSlide: false,
     // disableOnInteraction: false,
     // },
     //  loop:true,
      on: {
        slideChangeTransitionStart: function () {
         // console.log(this.activeIndex)
          // if(this.activeIndex==that.arr.length+1){
          //   that.num=0;
          // }else{
            that.num=this.activeIndex
          if(this.activeIndex==1){
            that.lineChart('swiper2',that.dateArr,that.l2,that.nowArr,that.confirmArr)
          }else if(this.activeIndex==2){
            that.lineChart('swiper3',that.dateArr1,that.l3,that.healArr,that.deadArr)
          }
        }
      }
      }
  }
},
  // 获取swiper实例
  computed:{
  swiper(){
    return this.$refs.mySwiper.$swiper
  }
  },
  mounted() {
  },
created() {
  api.getHistoryData()
    .then(res=>{
      // console.log(res)
      var data=res.data.data
      // console.log(data)
      var arr=data.chinaDayAddList
      var arr1=data.chinaDayList
      for(let i=0;i<arr.length;i++){
        this.addArr.push(arr[i].confirm)
        this.nameArr.push(arr[i].date)
        this.suspectArr.push(arr[i].suspect)
      }
      for(let i=0;i<arr1.length;i++){
        this.confirmArr.push(arr1[i].confirm)
        this.dateArr.push(arr1[i].date)
        this.dateArr1.push(arr1[i].date)
        this.nowArr.push(arr1[i].nowConfirm)
        this.healArr.push(arr1[i].heal)
        this.deadArr.push(arr1[i].dead)
      }
      // this.$nextTick(()=>{
        this.lineChart('swiper1',this.nameArr,this.l1,this.suspectArr,this.addArr)
        // this.lineChart('swiper2',this.dateArr,this.confirmArr,this.nowArr)
      // })
    })
},
  methods: {
    changeSwiper(index) {
      this.num = index
      this.swiper.slideTo(index, 1000, false)
      if(index==0){
        this.lineChart('swiper1',this.nameArr,this.l1,this.suspectArr,this.addArr)
      }else if(index==1){
        this.lineChart('swiper2',this.dateArr,this.l2,this.nowArr,this.confirmArr)
      }else{
        this.lineChart('swiper3',this.dateArr1,this.l3,this.healArr,this.deadArr)
      }
    },
    lineChart(id,name,legend,data1,data2) {
      var myChart = this.$echarts.init(document.getElementById(id))
      // console.log(id)
     var option = {
        title: {
          // text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
        // data: ['确诊', '疑似', ],
          data:legend
        },
        grid: {
          left: '0.1%',
          right: '0.5%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: name,
          axisLine:{
            show: true,
            lineStyle:{
              width:1,
              type:'solid'
            },
            interval:0
          },
          axisLabel: {
            show: true,
            rotate:'50',
            fontSize:6
          }
        },
       dataZoom: [
         {
           type: 'inside',
           start: 0,
           end: 30
         },
         {
           start: 0,
           end: 30
         }
       ],
       yAxis: {
          type: 'value',
          axisLabel: {
            fontSize:7
          }
        },
        series: [
          {
            name: legend[0],
            type: 'line',
            stack: 'Total',
            data:data1,
            itemStyle:{
              color:'orange'
            },
              lineStyle: {
                normal:{
                  color:'orange'
                }
              }
          },
          {
            name: legend[1],
            type: 'line',
            stack: 'Total',
            data: data2,
              lineStyle: {
                normal: {
                  color:'red'
                }
              }
          }
        ]
      };
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.swiper{
  margin: 5px 0px;
    #swiper1,#swiper2,#swiper3{
      background-color: #fff;
    }
  .list{
    display: flex;justify-content: center;
    background: #fff;
    .info{
      border: 1px solid #ccc;
      background-color: #fff;
      width: 17%;
      margin-left: 10px;
      text-align: center;
      padding: 5px;
      margin-top: 10px;
      &:first-child{
        margin-left: 0px;
      }
    }
    .active{
      background-color: orange;
    }
  }
}
</style>

